<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        // 防抖 ： 一段代码在 一定间隔时间内 只被触发一次 ，如果不停的触发，会从新计时。
        // 施法前摇；
        // 1.前置防抖  ： 先执行代码 在做防抖处理 
        // 2.后置防抖 ： 先做防抖出来 在执行代码 ；
        // 一、普通版本 
        // 1. 前置防抖 
        // var btn = document.querySelector("button");
        // var timer = null;
        // btn.onclick = function(){
        //     // 先要执行代码 
        //     if(!timer){
        //         console.log("需要执行的代码");
        //     }
        //     clearTimeout(timer); // 清除掉上一次的timer ，保证只有一个定时器；
        //     timer = setTimeout(function(){
        //         timer = null;
        //     }, 2000);
        // }

        /* 
            第一次点击  ： timer  = null 
                !timer 是true   就会执行代码 
                clearTimeout(null);
                timer就是1 

            第二次点击（间隔事件小于2s） ；  timer = 1；
                !timer 是false  不会执行代码 
                clearTimeout(1);
                timer 就是2 
        
            第二次点击 （间隔时间大于2s） ： timer = null 和开始一样了；
        */


        // 2.后置防抖 
        var btn = document.querySelector("button");
        var timer;
        btn.onclick = function(){
            clearTimeout(timer); // 清除掉上一次的timer ，保证只有一个定时器；
            timer = setTimeout(function(){
                console.log("需要执行的代码");
            }, 2000);
        }


    </script>
</body>
</html>